import { ReactNode, useEffect, useState } from 'react';
import login from '../utils/login';
import { Stack, FontWeights, IStackTokens, IStackStyles, ITextStyles } from '@fluentui/react';
import Alymodel from '../../mysql_interface/model';
import { asyncgetcoursecatebag, asyncgetktUser, asyncgetuserUsercourse, getAllCatebag, getAllCatebagtype, getallcourse, session } from '../api/api';
import { Nav } from './nav'
import { Routes, Route, useNavigate, useLocation } from 'react-router';
import Home from './home';
import Catebagview from '../view/Catebag';
import CouresView from '../view/Course';
import Login from '../view/login';
import DownloadView from '../view/download';
import { useBoolean } from '@fluentui/react-hooks';
const stackStyles: Partial<IStackStyles> = {
  root: {
    textAlign: 'center',
    color: '#fff',
    backgroundColor: '#5da869',
    height: 'var(--el-header-height)',
  },
};


const stackStyles2: Partial<IStackStyles> = {
  root: {
    '--el-header-height': '164px',
    '--nav-height': '40px',
    '--color-dark': 'rgb(93, 168, 105)',
  },
};




export default function App() {
  const [user, setuser] = useState<Alymodel.IMuser>()
  const [getCatebag, setCatebag] = useState<Alymodel.IMcatebag[]>([])
  const [getCatebagtype, setCatebagtype] = useState<Alymodel.IMcatebagtype[]>([])
  const [getCourse, setCourse] = useState<Alymodel.IMcourse[]>([])
  const [getuserCourse, setuserCourse] = useState<Alymodel.IMcourse[]>([])
  const [getuserUserCourse, setuserUserCourse] = useState<Alymodel.IMusercourse[]>([])
  const [getCoursecatebag, setCoursecatebag] = useState<Alymodel.IMcoursecatebag[]>([])
  const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false);
  const navigator = useNavigate()
  const location = useLocation()
  useEffect(() => {
    session().then(e => {
      setuser(e)
      if (location.pathname === '/') {
        navigator('/secure/myclass')
      }
    }).catch(f => {
      login(navigator)
    })
    return () => { }
  }, [true])

  useEffect(() => {
    if (user) {
      getAllCatebag({}).then(e => {
        if ([121649, 113417].includes(Number(user.userid))) {
          let data = e.filter(e => !e.name?.toLocaleLowerCase().includes('noip')).filter(e => !e.name?.toLocaleLowerCase().includes('省选'))
          if ([121649].includes(Number(user.userid))) {
            data = data.filter(e => !['信息学名师工作室', 'C++课程语言基础'].includes(String(e.name).toLocaleUpperCase()))
          }
          setCatebag(data)
        } else {
          setCatebag(e)
        }
      })
      getAllCatebagtype({}).then(e => {
        const data = e.sort((a, b) => Number(a.paixu) - Number(b.paixu))
        setCatebagtype(data)
      })
      getallcourse({}).then(e => {
        setCourse(e)
      })
      asyncgetktUser({}).then(e => {
        setuserCourse(e)
      })
      asyncgetuserUsercourse({}).then(e => {
        setuserUserCourse(e)
      })
      asyncgetcoursecatebag({}).then(e => {
        setCoursecatebag(e)
      })
      if (location.pathname === '/') {
        navigator('/secure/myclass')
      }
    }
  }, [user])

  return (
    <Stack style={{ backgroundColor: '#f5f5f5' }} styles={stackStyles2}>
      <Stack styles={stackStyles}>
        <Nav getuser={user} setshow={showModal} setuser={setuser} ></Nav>
      </Stack>
      <Routes>
        <Route path="/secure/myclass" element={
          <Home getuser={user} getCatebag={getCatebag} getCatebagtype={getCatebagtype} getCourse={getCourse} getuserCourse={getuserCourse} getuserUserCourse={getuserUserCourse} getCoursecatebag={getCoursecatebag} />
        } >
        </Route>
        <Route path="/catebag/:ID"
          element={<Catebagview getuser={user} getCatebag={getCatebag} getCatebagtype={getCatebagtype} getCourse={getCourse} getuserCourse={getuserCourse} getuserUserCourse={getuserUserCourse} getCoursecatebag={getCoursecatebag} ></Catebagview>}
        >
        </Route>
        <Route path="/course/:ID"
          element={<CouresView getuser={user} getCatebag={getCatebag} getCatebagtype={getCatebagtype} getCourse={getCourse} getuserCourse={getuserCourse} getuserUserCourse={getuserUserCourse} getCoursecatebag={getCoursecatebag} ></CouresView>}
        >
        </Route>
        <Route path="/secure/download" element={<DownloadView />

        } />
        <Route path="/login" element={<Login isModalOpen={isModalOpen} hideModal={hideModal} setuser={setuser} />
        } />
      </Routes>
    </Stack>
  )
}


